<template>
  <el-tag :size="size" :type="tag.type">{{ tag.label }}</el-tag>
</template>

<script setup>
const props = defineProps({
  value: {
    type: Number,
    default: 0,
  },
  size: {
    type: String,
    default: 'small',
  },
  options: {
    type: Array,
    default: () => [],
  },
})

const tag = computed(() => {
  const index = props.options.findIndex(v => v.id === props.value)
  return {
    type: ['primary', 'success', 'warning', 'danger'][index] ?? 'info',
    label: props.options?.[index]?.name ?? '未知',
  }
})
</script>

<style lang="scss" scoped>

</style>
